<template>
    <div :class="{active:flag,error:hasError}">1</div>
    <div :class="[activeClass,errorClass]">2</div>
  </template>
  
  <script>
  import { reactive, toRefs } from 'vue'
  
  export default {
    setup () {
      const state = reactive({
        flag:true,
        hasError:true,
        activeClass:"active",
        errorClass:"error"
      })
      return {
        ...toRefs(state),
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .active{
      height: 30px;
      width: 200px;
      border: 1px,solid,red;
    }
    .error{
      background-color: beige;
    }
  </style>